<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>error</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .lan{
            width: 300px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span>驾驶员名称:</span><el-input v-model="input1" placeholder="驾驶员名称" class="lan">&ensp;&ensp;</el-input> <span>驾驶证号:</span>
        <el-input v-model="input2" placeholder="驾驶证号" class="lan"></el-input>
        <el-button icon="el-icon-search" type="primary" @click="selectOne">查询</el-button><br>
        <br>
        <el-button type="warning" icon="el-icon-circle-plus-outline" @click="dialogFormVisible = true">添加驾驶员</el-button>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="驾驶员编号"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.driverId }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="驾驶员姓名"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.driverName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="驾驶证号"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.driverLicense }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="省份证号"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.idCard }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="性别"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.driverSex }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="联系方式"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.driverControl }}</span>
                </template>
            </el-table-column>


            <el-table-column
                    label="所属物流公司"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.logisticsName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="负责车辆"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.numberPlate }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="工龄(年)"
            >
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.driverAge }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit-outline"
                            @click="handleEdit(scope.$index, scope.row)"></el-button>
                    <el-button
                            size="mini"
                            type="warning"
                            icon="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="curr"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <el-dialog title="驾驶员操作" :visible.sync="dialogFormVisible" @close="closeMyDialog">
            <el-form :model="drivers">
                <el-form-item label="人员姓名:" :label-width="formLabelWidth">
                    <el-input v-model="drivers.driverName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证号:" :label-width="formLabelWidth">
                    <el-input v-model="drivers.idCard" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="驾驶证号:" :label-width="formLabelWidth">
                    <el-input v-model="drivers.driverLicense" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式:" :label-width="formLabelWidth">
                    <el-input v-model="drivers.driverControl" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="物流公司:" :label-width="formLabelWidth">
                    <el-select v-model="drivers.logisticsId" placeholder="请选择">
                        <el-option
                                v-for="l in logistics"
                                :label="l.logisticsName"
                                :value="l.logisticsId">
                        </el-option>
                    </el-select>
                   <!-- <el-input v-model="drivers.logisticsId" autocomplete="off"></el-input>-->
                </el-form-item>

                <el-form-item label="负责车辆:" :label-width="formLabelWidth">
<!--                    <el-input v-model="drivers.vehicleId" autocomplete="off"></el-input>-->
                    <el-select v-model="drivers.vehicleId" placeholder="请选择">
                        <el-option
                                v-for="v in vehicle"
                                :label="v.numberPlate"
                                :value="v.vehicleId">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="性别:" :label-width="formLabelWidth">
                    <el-select v-model="drivers.driverSex" placeholder="请选择">
                        <el-option
                                v-for="item in sex"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="工作年限:" :label-width="formLabelWidth">
                    <el-input v-model="drivers.driverAge" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="备注:" :label-width="formLabelWidth">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="drivers.remarks">
                    </el-input>
<!--                    <el-input v-model="drivers.remarks" autocomplete="off"></el-input>-->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRoles">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    //性别下拉菜单
                    sex: [{
                        value: '男',
                        label: '男'
                    }, {
                        value: '女',
                        label: '女'
                    }],
                    tableData:[],
                    input1:"",
                    input2:"",
                    vehicle:"",//查询所有的车辆信息
                    logistics:"",//查询所有的公司名称
                    formLabelWidth: '120px', //表单标签的宽度
                    curr:1,
                    total:0,
                    pageSize:5,
                    drivers:{//驾驶员基本信息
                        driverId:"",
                        driverName:"",
                        driverLicense:"",
                        idCard:"",
                        driverSex:"",
                        driverControl:"",
                        logisticsId:"",
                        vehicleId:"",
                        driverAge:"",
                        remarks:"",
                        status:"",
                        createId:"",
                        createTime:"",
                        updateId:"",
                        updateTime:""
                    },
                    dialogFormVisible:false,
                }
            },
            //函数定义区域
            methods:{
                //按照驾驶员和和证号查找
                selectOne(){
                    this.loadPage(this.curr,this.pageSize)
                    /*axios.get("/driverNameLicense/"+this.input1+"/"+this.input2).then(value => {
                        if(value.data.code==1){
                            this.tableData=value.data.data;
                        }
                    })*/
                },


                //清空数据
                closeMyDialog(){
                    this.drivers={
                        driverId:"",
                        driverName:"",
                        driverLicense:"",
                        idCard:"",
                        driverSex:"",
                        driverControl:"",
                        logisticsId:"",
                        vehicleId:"",
                        driverAge:"",
                        remarks:"",
                        status:"",
                        createId:"",
                        createTime:"",
                        updateId:"",
                        updateTime:""
                    }
                },

                handleEdit(index, row) {
                    console.log(index, row);
                    this.drivers=row;
                    this.dialogFormVisible=true;
                },
                handleDelete(index, row) {
                    console.log(index, row);
                    var id= row.driverId
                    if(confirm("您确定要删除吗")){
                        axios.delete("/driver/"+id).then(value => {
                            if(value.data.code==1&&this.total-((this.curr-1)*this.pageSize)==1){
                                this.loadPage(this.curr-1,this.pageSize)
                            }else {
                                this.loadPage(this.curr,this.pageSize)
                            }

                        })
                    }
                },

                //保存用户的方法
                saveRoles(){
                    if(this.drivers.driverId=='') {
                        axios.post("/driver", this.drivers).then(value => {
                            if (value.data.code == 1) {
                                this.loadPage(Math.ceil((this.total+1)/this.pageSize),this.pageSize)
                            }
                        })
                    }else {
                        axios.put("/driver", this.drivers).then(value => {
                            if (value.data.code == 1) {
                                this.loadPage(this.curr,this.pageSize)
                            }
                        })
                    }
                    this.dialogFormVisible= false;
                },

                handleSizeChange(pageSize) {
                    console.log(`每页 ${pageSize} 条`);
                    this.loadPage(this.curr,pageSize)
                },
                handleCurrentChange(curr) {
                    console.log(`当前页: ${curr}`);
                    this.loadPage(curr,this.pageSize)
                },

                loadPage(curr,pageSize){
                    this.curr=curr;
                    this.pageSize=pageSize;
                    if(this.input1==''&&this.input2==''){
                        axios.get("/driver?current="+curr+"&pageSize="+pageSize).then(value => {
                            if(value.data.code==1){
                                this.tableData=value.data.data.records;
                                this.curr=value.data.data.current;
                                this.pageSize=value.data.data.size;
                                this.total=value.data.data.total;
                            }
                        })
                    }else {
                        axios.get("/driverNameLicense?input1="+this.input1+"&input2="+this.input2+"&curr="+this.curr+"&pageSize="+this.pageSize).then(value => {
                            if(value.data.code==1){
                                this.tableData=value.data.data.records;
                                this.curr=value.data.data.current;
                                this.pageSize=value.data.data.size;
                                this.total=value.data.data.total;
                            }
                        })
                    }
                }
            },
            //页面加载成功回调
            mounted(){
                    //查询所有的用户分页
                    this.loadPage(1,5)

                    //查询所有的车辆并在下拉框中显示
                    axios.get("/vehicleAll").then(value => {
                        if(value.data.code==1){
                            this.vehicle=value.data.data;
                        }
                    });

                    //查询所有的公司名称
                axios.get("/logisticsAll").then(value => {
                    if(value.data.code==1){
                        this.logistics=value.data.data;
                    }
                })


            }
        })
    </script>
</body>
</html>